<template>
  <l-layout class="l-tab-page" v-show="!lr_loadPage">
    <l-panel>
      <template #toolLeft>
        <l-query2
          :items="queryItems"
          :formData="queryData"
          :loading="tableLoading"
          @search="handleSearch"
        >
          <template #f_RoleId>
            <l-select
              :options="lr_roleOptions(lr_roles)"
              v-model="queryData.f_RoleId"
            />
          </template>
        </l-query2>
      </template>
      <template #toolRight>
        <l-tool-btns
          :hasTableSetting="true"
          @setting="lr_handleSettingTable"
          @click="handleAdd()"
        >
        </l-tool-btns>
      </template>
      <l-table
        ref="mainTable"
        :loading="tableLoading"
        :columns="lr_getPageColumns(columns)"
        :dataSource="tableData"
        :isPage="true"
        :pageTotal="tableTotal"
        :tablePage.sync="tableCurrentPage"
        @loadPageData="turnTablePage"
      >
        <template
          v-for="(col, index) in lr_tableColumnsByToLabel(
            lr_getPageColumns(columns)
          )"
          v-slot:[col.prop]="scope"
        >
          <l-value-to-label
            :value="scope.row[col.prop]"
            :type="col.dataType"
            :code="col.dataCode"
            :valueKey="col.valueKey"
            :labelKey="col.labelKey"
            :options="col.options"
            :format="col.format"
            :setting="col.setting"
            :key="index"
          ></l-value-to-label>
        </template>
        <l-table-btns
          :btns="tableBtns"
          @click="lr_handleTableBtnClick"
        ></l-table-btns>
      </l-table>
    </l-panel>

    <!--表单-->
    <l-dialog
      :title="$t(formTitle)"
      :visible.sync="formVisible"
      :height="420"
      :width="500"
      @ok="handleSave"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <my-form ref="form" :isReadOnly="formDetails"></my-form>
    </l-dialog>
  </l-layout>
</template>

<script>
import MyForm from "./form";
const api = window.$api.systemconfig.otherPasswordRule;

export default {
  components: {
    MyForm,
  },
  data() {
    return {
      lr_isPage: true,
      moduleCode: "PasswordRuleManage",

      // 查询参数
      queryData: {
        f_SecretLevel: "",
        f_Complexity: "",
      },

      queryItems: [
        { label: this.$t("角色"), prop: "f_RoleId" },
        // {label:'复杂度',prop:'f_Complexity'},
      ],

      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        {
          label: "角色",
          prop: "f_RoleId",
          minWidth: 160,
          align: "left",
          formatter: ({cellValue }) => {
            this.lr_loadRole(cellValue);
            return (this.lr_role[cellValue] || {})["f_FullName"] || "";
          },
        },
        {
          label: "复杂度",
          prop: "f_Complexity",
          minWidth: 160,
          align: "left",
          dataType: "mydata",
          options: [
            { value: "1", label: "大写字母 " },
            { value: "2", label: "小写字母" },
            { value: "3", label: "数字" },
            { value: "4", label: "特殊字符" },
          ],
        },
        {
          label: "更换周期/天",
          prop: "f_Day",
          width: 100,
          align: "center",
          dataType: "number",
        },
        {
          label: "密码长度",
          prop: "f_Length",
          width: 100,
          align: "center",
          dataType: "number",
        },
        
        {
          label: "最后修改人员",
          prop: "f_ModifyUserId",
          width: 100,
          align: "left",
          dataType: "user",
        },
        {
          label: "最后修改时间",
          prop: "f_ModifyDate",
          width: 160,
          align: "left",
          dataType: "datetime",
        },
      ],
      tableBtns: [
        { prop: "Edit", label: this.$t("编辑"), width: 40 },
        { prop: "Delete", label: this.$t("删除"), width: 40 },
        { prop: "Details", label: this.$t("详情"), width: 40 },
      ],

      // 表单参数
      formVisible: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false,
      formDetails: false,
    };
  },
  computed: {
    f_ComplexityOptions() {
      return [
        { value: "1", label: this.$t("大写字母") },
        { value: "2", label: this.$t("小写字母") },
        { value: "3", label: this.$t("数字") },
        { label: this.$t("特殊字符"), value: "4" },
      ];
    },
  },
  created() {
    this.lr_loadRoles();
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loadTableData();
    },

    handleSearch() {
      this.loadTableData();
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = this.$deepClone(this.queryData);

      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "f_SecretLevel";
      queryData.f_Type = 1; //类型(1角色，2密级)
      let data = await this.$awaitWraper(api.getPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },

    handleAdd() {
      this.formEdit = false;
      this.formDetails = false;
      this.handleShowForm("新增");
    },
    handleEdit($index, row) {
      this.formEdit = true;
      this.formDetails = false;
      this.formEditRow = row;
      this.handleShowForm("编辑");
    },
    handleDelete($index, row) {
      this.$confirm(
        this.$t("此操作将永久删除该数据, 是否继续?"),
        this.$t("提示"),
        {
          confirmButtonText: this.$t("确定"),
          cancelButtonText: this.$t("取消"),
          type: "warning",
        }
      )
        .then(async () => {
          this.tableData.splice($index, 1);
          this.tableTotal--;
          await api.remove(row.f_Id);
          this.$message({
            type: "success",
            message: this.$t("删除成功!"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("已取消删除!"),
          });
        });
    },
    handleDetails($index, row) {
      this.formEdit = true;
      this.formDetails = true;
      this.formEditRow = row;
      this.handleShowForm("详情");
    },

    async handleSave(showLoading, hideLoading) {
      showLoading("保存数据中...");
      if (await this.$refs.form.validateForm()) {
        const res = await this.$refs.form.saveForm({
          keyValue: this.formEdit ? this.formEditRow.f_Id : "",
          isEdit: this.formEdit,
        });
        if (res) {
          const msg = this.formEdit
            ? this.$t("更新成功!")
            : this.$t("新增成功!");
          this.$message({
            type: "success",
            message: this.$t(msg),
          });
          this.loadTableData();
          this.formVisible = false;
        }
      }
      hideLoading();
    },

    handleShowForm(text) {
      this.formTitle = text;
      this.formVisible = true;
    },
    async handleOpenedForm(showLoading, hideLoading) {
      if (this.formEdit) {
        showLoading("加载数据中...");
        await this.$refs.form.loadFormData({ keyValue: this.formEditRow.f_Id });
        hideLoading();
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },
  },
};
</script>
